在 Nuxt.js 中，中介軟體 (Middleware) 是一個強大且靈活的機制，用於在進入頁面或路由之前對應用程序的請求進行預處理。通過使用中介軟體，開發者可以控制應用的流向、執行特定的邏輯，例如身份驗證、權限檢查或其他需要在頁面渲染前完成的操作。本文將詳細介紹 Nuxt.js 中介軟體的概念、應用場景及實際使用方式。

什麼是中介軟體 (Middleware)?

在 Nuxt.js 中，中介軟體是一段在頁面或路由渲染之前運行的代碼，這段代碼可以是同步的或異步的。它的主要作用是攔截用戶進入某些頁面，進行邏輯判斷和必要的預處理。例如，當用戶訪問某些需要授權的頁面時，可以通過中介軟體檢查用戶的登入狀態，如果未登入，則可以重定向到登入頁面。

中介軟體通常在以下幾種情況下使用：

• 身份驗證與授權檢查
• 記錄分析
• 路由重定向
• 數據預加載

如何定義中介軟體

在 Nuxt.js 中，所有中介軟體文件都應放置於 middleware 目錄中。每個中介軟體都是一個函數，該函數接受一個 context 參數，這個參數可以讓你訪問應用的狀態、路由信息、store 等資源。

以下是一個簡單的中介軟體示例，用於檢查用戶是否已經登入：

// middleware/auth.js
export default function ({ store, redirect }) {
  // 檢查用戶是否已經登入
  if (!store.state.auth.loggedIn) {
    return redirect('/login');
  }
}

這段中介軟體的邏輯是：如果用戶尚未登入 (store.state.auth.loggedIn 為 false)，則將用戶重定向到登入頁面。這樣可以有效地保護需要授權的頁面。

如何使用中介軟體

在 Nuxt.js 中，你可以在不同的層級上應用中介軟體：單個頁面、全局應用以及特定的路由。

在單個頁面上使用
如果只需要在某個特定的頁面上運行中介軟體，可以在該頁面組件的配置中指定：

// pages/profile.vue
export default {
  middleware: 'auth',
  // 其他頁面代碼
}

這樣，當用戶試圖訪問 /profile 頁面時，auth 中介軟體會首先運行，檢查用戶的登入狀態，未登入的用戶會被重定向到登入頁。

在全局範圍使用
如果你想讓中介軟體在應用的每個路由變更時都執行，可以在 nuxt.config.js 中進行配置：

// nuxt.config.js
export default {
  router: {
    middleware: 'auth'
  }
}

這樣，auth 中介軟體將會在應用的每個路由變更之前執行，用戶訪問任意頁面時都會觸發登入狀態的檢查。這對於需要全局身份驗證的應用非常有用。

對於特定路由使用
如果某些路由需要特殊的處理邏輯，Nuxt.js 也支持對單個路由應用中介軟體。你可以在 pages 目錄中的特定路由文件上設置：

// pages/admin.vue
export default {
  middleware: ['auth', 'adminCheck'],
  // 其他頁面代碼
}

在這個例子中，我們不僅檢查用戶的登入狀態 (auth 中介軟體)，還會檢查用戶是否有管理員權限 (adminCheck 中介軟體)。這種多重中介軟體的使用讓我們能夠靈活地控制應用邏輯。

異步中介軟體

Nuxt.js 的中介軟體不僅支持同步邏輯，也支持異步操作。這在需要與 API 進行交互的場景中非常實用，例如，你可以在中介軟體中調用 API 檢查用戶的權限。

例如，這裡是一個異步中介軟體的例子，檢查用戶是否擁有訪問特定資源的權限：

// middleware/permission.js
export default async function ({ store, redirect }) {
  try {
    const hasPermission = await store.dispatch('checkUserPermission');
    if (!hasPermission) {
      return redirect('/no-permission');
    }
  } catch (error) {
    console.error('Error checking permissions:', error);
    return redirect('/error');
  }
}

在這個示例中，我們通過 Vuex 的 dispatch 方法來發起一個異步操作，檢查用戶是否擁有訪問權限。根據檢查結果，重定向用戶到不同的頁面。

中介軟體的應用場景

身份驗證與授權
身份驗證是中介軟體最常見的應用場景之一。通過檢查用戶是否已經登入，或者確認用戶是否具有相應的角色或權限，可以保護應用中的敏感頁面，防止未授權的訪問。

路由重定向
中介軟體可以用來動態修改或重定向用戶的路由。例如，根據用戶的角色，自動將其重定向到不同的頁面，或是將不符合條件的訪問者重定向到錯誤頁面。

數據預加載
在某些情況下，我們需要在頁面渲染之前獲取某些數據。中介軟體可以作為一個預處理器，負責調用 API 或其他外部資源，然後將結果傳遞給頁面組件進行渲染。

中介軟體與 Vuex 的結合

中介軟體與 Vuex 狀態管理器一起使用時非常強大。你可以在中介軟體中調用 Vuex 的 action，來更新應用的全局狀態。例如，可以在進入頁面之前檢查並更新用戶的資料，確保頁面渲染時有最新的數據。

// middleware/fetchUser.js
export default async function ({ store }) {
  if (!store.state.user) {
    await store.dispatch('fetchUser');
  }
}

這樣可以在頁面渲染之前確保 Vuex 中的狀態已經準備好，並且避免不必要的重複數據請求。

總結

Nuxt.js 的中介軟體機制提供了一個靈活的方式來控制應用程序的頁面訪問和數據處理。無論是身份驗證、權限檢查還是路由重定向，中介軟體都能夠在頁面渲染之前提供強大的預處理功能。通過正確使用中介軟體，開發者可以創建一個更加安全、高效且可維護的應用架構，並確保每個頁面在進入之前都符合應用的業務邏輯需求。